<template>
  <v-card flat title="学院数据">
    <v-btn
      icon="mdi-plus"
      @click="openDialog"
      style="margin-left: 20px"
    ></v-btn>
    <template v-slot:text>
      <div class="d-flex flex-row">
        <v-text-field
          style="margin: 5px"
          v-model="searchid"
          label="学院号"
          variant="outlined"
        ></v-text-field>
        <v-text-field
          style="margin: 5px"
          v-model="searchname"
          label="学院名"
          variant="outlined"
        ></v-text-field>
        <v-btn icon="mdi-magnify" style="margin: 5px" @click="searchS"></v-btn>
      </div>
    </template>

    <!-- 弹出对话框 -->
    <v-dialog v-model="newDialog" max-width="500px" persistent>
      <v-card>
        <v-card-title>填写学院信息</v-card-title>
        <v-card-text>
          <v-form>
            <!-- 在这里添加输入框 -->
            <v-text-field
              v-model="edited.dept_id"
              label="学院号"
            ></v-text-field>
            <v-text-field
              v-model="edited.dept_name"
              label="学院名"
            ></v-text-field>
            <v-text-field
             v-model="edited.address"
              label="地址">
            </v-text-field>
            <v-text-field
              v-model="edited.phone_code"
              label="联系电话"
            ></v-text-field>
          </v-form>
        </v-card-text>
        <v-card-actions>
          <v-btn @click="saveChanges">保存</v-btn>
          <v-btn @click="closeDialog">关闭</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-dialog v-model="editDialog" max-width="500px" persistent>
      <v-card>
        <v-card-title>修改学院信息</v-card-title>
        <v-card-text>
          <v-form>
            <!-- 在这里添加输入框 -->
            <v-text-field
              v-model="change.dept_id"
              label="学院号"
            ></v-text-field>
            <v-text-field
              v-model="change.dept_name"
              label="学院名"
            ></v-text-field>
            <v-text-field
             v-model="change.address"
              label="地址">
            </v-text-field>
            <v-text-field
              v-model="change.phone_code"
              label="联系电话"
            ></v-text-field>

          </v-form>
        </v-card-text>
        <v-card-actions>
          <v-btn @click="saveEdit">保存</v-btn>
          <v-btn @click="closeEditDialog">关闭</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <!-- 数据表格 -->
    <v-card>
      <v-card-item>
        <v-data-table :headers="Headers" :items="items" :search="search">
          <template v-slot:item="{ item }">
            <tr>
              <td>{{ item.dept_id }}</td>
              <td>{{ item.dept_name }}</td>
              <td>{{ item.address }}</td>
              <td>{{ item.phone_code }}</td>
              <td>
                <!-- 下拉菜单按钮 -->
                <v-btn
                  icon="mdi-pencil"
                  style="margin: 10px"
                  @click="openEditDialog(item)"
                >
                </v-btn>
              </td>
            </tr>
          </template>
        </v-data-table>
      </v-card-item>
    </v-card>
  </v-card>
</template>
<script>
import axios from "axios";
export default {
  created() {
    this.searchS();
  },
  data() {
    return {
      search: "",
      pageSelected: -1,
      searchid: "",
      searchname: "",
      refresh: true,
      newDialog: false,
      editDialog: false,
      Headers: [
        { key: "dept_id", align: "start", sortable: false, title: "学院号" },
        { key: "dept_name", title: "学院名" },
        { key: "address", title: "地址" },
        { key: "phone_code", title: "联系电话" },
        { key: "option", title: "选项", sortable: false },
      ],
      items: [],
      deptOptions: [
        "计算机学院",
        "通讯学院",
        "钱伟长学院",
        "理学院",
        "通信与信息工程学院（翔英学院）",
        "计算机工程与科学学院",
        "机电工程与自动化学院",
        "材料科学与工程学院",
        "环境与化学工程学院",
        "生命科学学院",
        "中欧工程技术学院",
        "微电子学院",
        "力学与工程科学学院（上海市应用数学和力学研究所）",
        "里斯本学院",
      ],
      edited: {},
      change: {},
    };
  },
  methods: {
    async searchS() {
      // 处理搜索按钮点击事件
      console.log("Searching for:", this.searchid, this.searchname);
      let new_items = [];
      await axios({
        method: "get",
        url: "http://127.0.0.1:8000/admin/dept",
        params: {
          dept_id: this.searchid,
          dept_name: this.searchname,
        },
      }).then((res) => {
        console.log("searchS:", res);
        new_items = res.data;
      });
      this.items = new_items.data;
      // 在这里可以添加搜索逻辑
    },
    async deleteT(dept) {
      console.log("Deleting dept with id:", this.deleteTid);

      await axios({
        method: "get",
        url: "http://127.0.0.1:8000/admin/dept/delete",
        params: {
          dept_id: dept,
        },
      }).then((res) => {
        console.log("deleteT:", res.data);
      });
      this.searchS();
    },
    showDropdown(item) {
      // 处理下拉菜单按钮点击事件
      console.log("Dropdown clicked for:", item);
      // 在这里可以添加下拉菜单的显示逻辑
    },
    async openDialog() {
      // 初始化编辑的学生信息
      this.newDialog = true;
      this.edited = {
        dept_id: "",
        dept_name: "",
        address: "",
        phone_code: "",
      };
      this.dialog = true;
    },
    async saveChanges() {
      // 处理保存逻辑，可以将编辑后的学生信息保存到数据中
      console.log("Saved changes:", this.edited);
      await axios({
        method: "get",
        url: "http://127.0.0.1:8000/admin/dept/add",
        params: {
          dept_id: this.edited.dept_id,
          dept_name: this.edited.dept_name,
          address: this.edited.address,
          phone_code: this.edited.phone_code,
        },
      }).then((res) => {
        console.log("addT:", res.data);
      });
      // 关闭对话框
      this.newDialog = false;
      this.searchS();
      let dept_info=[]
      await axios({
          method: "get",
          url: "http://127.0.0.1:8000/admin/dept",
          params: {
            dept_id: '',
            dept_name:''
          },
        }).then((res) => {
          console.log(res);
          dept_info=res.data.data
        });
        let dept_names=[]
        for(var i=0;i<dept_info.length;i++)
        {
          dept_names.push(dept_info[i].dept_name)
        }
        console.log(dept_names)
        this.$root.dept_names=dept_names
    },
    closeDialog() {
      // 关闭对话框
      this.newDialog = false;
    },
    async openEditDialog(item) {
      // 初始化编辑的学生信息
      this.editDialog = true;
      this.change = {
        dept_id: item.dept_id,
        dept_name: item.dept_name,
        address: item.address,
        phone_code: item.phone_code,
      };
      this.dialog = true;

      },
    closeEditDialog() {
      // 关闭对话框
      this.editDialog = false;
    },
    async saveEdit() {
      // 处理保存逻辑，可以将编辑后的学生信息保存到数据中
      console.log("Saved changes:", this.change);
      await axios({
        method: "get",
        url: "http://127.0.0.1:8000/admin/dept/update",
        params: {
          dept_id: this.change.dept_id,
          dept_name: this.change.dept_name,
          address: this.change.address,
          phone_code: this.change.phone_code,
        },
      }).then((res) => {
        console.log("editT:", res.data);
      });
      // 关闭对话框
      this.editDialog = false;
      this.searchS();
      let dept_info=[]
      await axios({
          method: "get",
          url: "http://127.0.0.1:8000/admin/dept",
          params: {
            dept_id: '',
            dept_name:''
          },
        }).then((res) => {
          console.log(res);
          dept_info=res.data.data
        });
        let dept_names=[]
        for(var i=0;i<dept_info.length;i++)
        {
          dept_names.push(dept_info[i].dept_name)
        }
        console.log(dept_names)
        this.$root.dept_names=dept_names
    },
  },
};
</script>
